Create a modern, elegant, premium, responsive jewelry website using only HTML5, CSS3, and vanilla JavaScript.

Do not use PHP, databases, APIs, backend services, React, Vue, Angular, Bootstrap, jQuery, or unnecessary external dependencies.

The website should look like a real luxury jewelry brand/e-commerce store, with a sophisticated, high-end, visually appealing design.

Main Goal

Build a beautiful jewelry website where visitors can:

Explore jewelry collections
Browse products
View product details
Search for products
Filter and sort products
Add products to a shopping cart
View their cart
Learn about the jewelry brand
View jewelry collections
Contact the business
Read important legal pages

The website should feel:

Luxury + Elegant + Modern + Minimal + Premium + Trustworthy + Feminine + Sophisticated

The website must be lightweight, fast-loading, mobile-friendly, SEO-friendly, accessible, and suitable for uploading directly to any static web hosting service.

Website Design

Use a premium luxury jewelry aesthetic.

Color Palette

Use an elegant color combination such as:

White / Ivory
Soft Cream
Champagne
Warm Beige
Charcoal / Black
Subtle Gold accents

Do not overuse gold. Use it carefully for borders, buttons, icons, highlights, and decorative elements.

Design Style

Use:

Large premium jewelry photography
Elegant typography
Sophisticated serif headings
Clean modern sans-serif body text
Spacious layouts
Minimalistic design
Soft shadows
Thin borders
Rounded corners where appropriate
Subtle hover animations
Smooth transitions
Premium product cards
Large whitespace
Elegant buttons
High-quality image placeholders
Luxury editorial-style sections

Avoid a cheap, overly colorful, cluttered, or generic e-commerce appearance.

The website should visually resemble a high-end jewelry boutique.

Website Pages

Create the following separate pages:

Home
Shop
Product Details
Collections
About Us
Jewelry Care Guide
FAQ
Contact Us
Shopping Cart
Privacy Policy
Disclaimer
Terms and Conditions
Shipping & Returns
Header

Create a premium sticky header.

Include:

Top Announcement Bar

Example:

"Complimentary Shipping on Orders Over $100"

Allow this text to be easily customized.

Main Header

Include:

Jewelry brand logo/name
Navigation menu
Search icon
Account icon
Wishlist icon
Shopping bag/cart icon
Cart item counter

Navigation:

Home
Shop
Collections
About
Jewelry Care
FAQ
Contact

Add a prominent "Shop Now" button if appropriate.

On mobile:

Use a hamburger menu
Display search
Display cart icon
Make the navigation easy to use

Make the header sticky while scrolling.

Homepage

Create a visually impressive luxury homepage.

Hero Section

Create a large premium hero section.

Include:

Large jewelry lifestyle image
Elegant headline
Short description
Primary CTA
Secondary CTA

Example:

Timeless Jewelry, Made to Be Remembered

Description:

"Discover beautifully crafted pieces designed to celebrate your most meaningful moments."

Buttons:

Shop Collection

Explore New Arrivals

Use a sophisticated image overlay if necessary.

The hero should immediately communicate luxury and quality.

Featured Categories

Create a "Shop by Category" section.

Display attractive image cards for:

Rings
Necklaces
Earrings
Bracelets
Wedding Jewelry
New Arrivals

Each category card should contain:

Large image
Category name
Short description
Explore button or clickable area

Use beautiful hover effects.

Featured Products

Create a premium product showcase.

Display products in responsive cards.

Each product card should include:

Product image
Product name
Short description
Price
Previous price if applicable
Sale badge if applicable
New badge if applicable
Wishlist heart icon
Add to Cart button
Quick View button

Example products:

Classic Gold Solitaire Ring
Pearl Drop Earrings
Diamond Tennis Bracelet
Minimal Gold Necklace
Emerald Statement Ring
Rose Gold Pendant
Classic Pearl Necklace
Gold Hoop Earrings

Clearly mark all product information as sample/placeholder content that can be replaced.

New Arrivals

Create a premium "New Arrivals" section.

Include:

Product image
Product name
Price
Wishlist button
Add to Cart button
New badge

Add a:

View All New Arrivals

button.

Best Sellers

Create a Best Sellers section.

Display popular jewelry products using premium product cards.

Each card should have:

Product image
Product name
Price
Rating
Wishlist
Add to Cart

Use sample/demo ratings and clearly indicate they are placeholder data.

Promotional Banner

Create an elegant promotional section.

Example:

A Little Luxury, Just for You

"Discover timeless pieces crafted to make every moment sparkle."

Button:

Shop Jewelry

Use a beautiful jewelry background image.

Why Choose Us

Create a luxury brand trust section.

Include 4–5 feature cards:

Premium Craftsmanship

"Every piece is thoughtfully designed with attention to detail."

Quality Materials

"Made using carefully selected materials and finishes."

Timeless Design

"Elegant pieces designed to complement every occasion."

Secure Shopping

"Enjoy a safe and convenient shopping experience."

Thoughtful Packaging

"Every order is beautifully prepared for gifting or keeping."

Use elegant icons created using inline SVG or CSS.

Do not depend on external icon libraries unless absolutely necessary.

Brand Story Preview

Create an elegant About section.

Include:

Jewelry lifestyle image
Short brand story
Brand philosophy
"Discover Our Story" button

Example headline:

Jewelry With Meaning

Example text:

"We believe jewelry is more than an accessory. It carries memories, celebrates milestones, and becomes part of the stories we treasure."

Customer Testimonials

Create a premium testimonials section.

Include 3–6 sample testimonials.

Each testimonial should contain:

Customer name
Short review
Star rating
Optional avatar

Clearly indicate that testimonials are demo/placeholder content and can be replaced with genuine customer reviews.

Newsletter Section

Create a sophisticated newsletter signup design.

Include:

Join Our World of Sparkle

"Be the first to discover new collections, exclusive offers, and jewelry inspiration."

Include:

Email input
Subscribe button

Because this is a static website, do not create a backend newsletter system.

Use a placeholder/demo form action and clearly indicate that it needs to be connected to a real email marketing service later.

Shop Page

Create a complete jewelry shopping page.

Include:

Page title
Breadcrumb navigation
Product count
Search
Category filtering
Price filtering
Sorting
Product grid

Categories:

Rings
Necklaces
Earrings
Bracelets
Pendants
Wedding Jewelry
Men's Jewelry
Gifts
New Arrivals

Sorting options:

Featured
Newest
Price: Low to High
Price: High to Low
Best Selling
Product Filtering

Use vanilla JavaScript to implement client-side filtering.

Users should be able to filter products by:

Category
Price range
Availability
Featured/New

Add a "Clear Filters" button.

Filtering should work without any API or backend.

Product Search

Add a lightweight JavaScript-powered product search.

Users should be able to search by:

Product name
Category
Keywords

Display a friendly message when no products are found.

Example:

No jewelry found

"Try searching for another product or category."

Product Details Page

Create a premium product detail layout.

Include:

Large product image
Thumbnail gallery
Product name
Price
Sale price if applicable
Product rating
Product description
Material information
Jewelry dimensions
Availability
Quantity selector
Add to Cart button
Buy Now button
Wishlist button

Add product information sections:

Product Details
Materials
Size & Dimensions
Shipping Information
Returns

Use expandable accordion sections.

Product Image Gallery

Implement a lightweight JavaScript image gallery.

Features:

Thumbnail images
Main product image
Previous/next buttons
Click thumbnail to change image
Optional lightbox
Close button
Keyboard accessibility

Do not use an external gallery library.

Shopping Cart

Create a functional client-side shopping cart using vanilla JavaScript.

Users should be able to:

Add products
Remove products
Increase quantity
Decrease quantity
View subtotal
View estimated shipping
View total
Clear cart

Store cart information using localStorage.

Display a cart counter in the header.

Show an attractive empty-cart state.

Example:

Your jewelry bag is waiting

"Discover a piece you'll love."

Button:

Continue Shopping

Checkout

Create a beautiful static checkout page/interface.

Include placeholder sections for:

Customer information
Shipping address
Order summary
Payment method

Important:

Do not implement real payment processing.

Clearly label the checkout as a demo/static interface that must be connected to a secure payment gateway and backend before accepting real orders.

Do not collect or store real payment card information.

Wishlist

Implement a simple client-side wishlist.

Users should be able to:

Add products to wishlist
Remove products
View wishlist
Save wishlist using localStorage

Use a heart icon for wishlist actions.

Collections Page

Create an elegant collections page.

Show collections such as:

Everyday Elegance

Minimal jewelry designed for everyday wear.

Bridal Collection

Elegant pieces for weddings and special occasions.

Statement Collection

Bold designs created to make an impression.

Pearl Collection

Timeless pearl jewelry with a modern touch.

Gold Collection

Classic gold-inspired designs.

Gift Collection

Beautiful jewelry ideas for meaningful occasions.

Each collection should have:

Large image
Collection name
Description
Explore Collection button
About Us Page

Create a professional luxury jewelry brand story.

Include:

Our Story

Explain how the jewelry brand started.

Our Philosophy

Focus on:

Craftsmanship
Quality
Timeless design
Attention to detail
Customer experience
Our Mission

Explain the brand's mission.

Our Values

Include:

Quality
Elegance
Trust
Creativity
Customer Satisfaction
Craftsmanship

Show how each piece is designed and crafted.

Use premium jewelry imagery.

Jewelry Care Guide

Create a helpful jewelry-care page.

Include sections for:

How to clean jewelry
How to store jewelry
How to protect jewelry
Gold jewelry care
Silver jewelry care
Pearl care
Gemstone care

Use simple cards or accordion sections.

Do not make unsupported claims about specific materials.

FAQ Page

Create a professional FAQ section.

Include questions such as:

How do I choose the right ring size?
How should I care for my jewelry?
What materials are used?
How long does shipping take?
Do you offer returns?
Can I exchange an item?
Is gift packaging available?
How can I track my order?
Are the products suitable for gifting?

Use JavaScript accordion functionality.

Contact Us Page

Do not create a backend contact form.

Instead, create a professional contact information page.

Include:

Get in Touch

"We'd love to hear from you. Contact us with questions about our jewelry, orders, or collections."

Phone:

+1 234 567 890

Email:

hello@example.com

Address:

123 Jewelry Avenue, Your City, Country

Use clearly marked placeholder information.

Include:

Business Hours

Monday – Friday: 10:00 AM – 7:00 PM

Saturday: 10:00 AM – 5:00 PM

Sunday: Closed

Create buttons for:

Call Us
Email Us
Get Directions

Use tel: and mailto: links.

Do not embed Google Maps or use an external API.

Shipping & Returns Page

Create a professional informational page covering:

Shipping options
Estimated delivery
Processing times
International shipping
Return period
Exchange policy
Damaged products
Refund information

Use placeholders where business-specific information is required.

Do not make unsupported guarantees.

Footer

Create a premium footer consistent across every page.

Include:

Brand

Jewelry brand name and short description.

Shop
All Jewelry
Rings
Necklaces
Earrings
Bracelets
New Arrivals
Information
About Us
Jewelry Care
FAQ
Shipping & Returns
Contact
Legal
Privacy Policy
Disclaimer
Terms and Conditions
Contact
Phone
Email
Address
Social Media

Add placeholder links for:

Instagram
Facebook
Pinterest
YouTube
TikTok

Use # placeholders that can be replaced later.

Do not create fake social profiles.

Add:

© 2026 [Jewelry Brand Name]. All rights reserved.

Privacy Policy

Create a professional Privacy Policy explaining:

Information collected
Contact information
Cookies
Analytics
Local storage
Third-party services
Website security
User rights
Children's privacy
Policy updates
Contact information

Use placeholders where website-specific information is required.

Do not make false claims.

Disclaimer

Create a professional Disclaimer covering:

General informational purposes
Product descriptions
Product images
Pricing
Availability
Jewelry care information
Third-party links
Placeholder/demo information

Do not make unsupported guarantees.

Terms and Conditions

Create professional Terms and Conditions covering:

Acceptance of terms
Website usage
Acceptable use
Product information
Pricing
Orders
Shopping cart
Payments
Shipping
Returns
Intellectual property
User responsibility
Third-party links
Service availability
Limitation of liability
Changes to website
Changes to terms
Contact information
SEO Requirements

Make every page SEO-friendly.

Each page must include:

Unique <title>
Unique meta description
Appropriate robots meta tag
Semantic HTML5
Proper heading hierarchy
One <h1> per page
Descriptive image alt attributes
Clean internal links
SEO-friendly filenames
Mobile responsiveness
Canonical URL placeholder where appropriate
Open Graph meta tags
Basic social sharing metadata

Suggested titles:

Home:

[Brand Name] | Luxury Jewelry & Timeless Designs

Shop:

Shop Jewelry | [Brand Name]

Collections:

Jewelry Collections | [Brand Name]

About:

About Us | [Brand Name]

Jewelry Care:

Jewelry Care Guide | [Brand Name]

FAQ:

Frequently Asked Questions | [Brand Name]

Contact:

Contact Us | [Brand Name]

Shipping:

Shipping & Returns | [Brand Name]

Privacy:

Privacy Policy | [Brand Name]

Disclaimer:

Disclaimer | [Brand Name]

Terms:

Terms & Conditions | [Brand Name]

Structured Data

Where appropriate, add valid JSON-LD structured data for:

Jewelry business/brand
Products
Breadcrumbs
Website

Use placeholder values where necessary.

Do not add fake reviews or fake business information to structured data.

Technical Requirements

Use only:

HTML5
CSS3
Vanilla JavaScript

Do NOT use:

PHP
MySQL
Databases
Backend services
APIs
API keys
React
Vue
Angular
Bootstrap
jQuery
Unnecessary libraries

The website must work as a completely static website.

File Structure

Organize the project cleanly:

index.html
shop.html
product.html
collections.html
about.html
jewelry-care.html
faq.html
contact.html
cart.html
checkout.html
shipping-returns.html
privacy-policy.html
disclaimer.html
terms.html
style.css
script.js

images/
logo/
products/
collections/
banners/
gallery/

JavaScript Features

Use lightweight vanilla JavaScript for:

Mobile navigation
Sticky header
Product search
Product filtering
Product sorting
Product image gallery
Product lightbox
Add to cart
Remove from cart
Quantity controls
Cart calculations
localStorage cart
Wishlist
localStorage wishlist
FAQ accordion
Smooth scrolling
Scroll animations
Quick view
UI interactions

Keep JavaScript lightweight and organized.

Do not add unnecessary functionality.

Responsive Design

The website must work perfectly on:

Desktop
Laptop
Tablet
Mobile phones

Use CSS media queries.

Ensure:

Navigation works on mobile
Product grids adapt correctly
Images scale correctly
Product details stack properly
Buttons are touch-friendly
Text remains readable
No horizontal scrolling
Cart works on mobile
Filters work properly on mobile
Accessibility

Follow basic accessibility best practices.

Include:

Semantic HTML
Descriptive alt text
Keyboard-accessible navigation
Visible focus states
Accessible buttons
Accessible form controls
Sufficient color contrast
ARIA attributes where appropriate
Proper heading hierarchy
Keyboard-accessible modal/lightbox
Escape key support for overlays
Performance

Keep the website lightweight and fast.

Avoid:

Large unnecessary JavaScript files
Unnecessary libraries
Autoplay videos
Excessive animations
Blocking resources
Heavy third-party scripts

Use:

Lazy loading for product/gallery images
Optimized image dimensions
CSS-based effects where possible
Minimal JavaScript
Efficient DOM manipulation
Visual Details

Pay special attention to the visual design.

The website should have:

Luxury editorial-style layouts
Large premium jewelry images
Elegant typography
Sophisticated spacing
Subtle gold accents
Smooth hover effects
Beautiful product cards
Refined buttons
Minimal borders
Soft shadows
Premium navigation
Attractive promotional banners
High-end product presentation

Do not make the design look like a generic template.

Create a unique luxury jewelry brand experience.

Important Placeholder Rules

Use realistic placeholder jewelry products and content.

Clearly indicate placeholder information where necessary.

The website owner should easily be able to replace:

Brand name
Logo
Product names
Product images
Prices
Product descriptions
Contact details
Address
Social links
Shipping policy
Return policy
Business hours

Do not invent real company information, fake reviews, fake addresses, or fake social profiles.

Final Goal

Build a premium, elegant, modern, responsive, SEO-friendly jewelry website that looks like a real luxury jewelry e-commerce brand.

The final website should feel:

Luxury + Elegant + Modern + Minimal + Premium + Trustworthy + Fast + Mobile-Friendly

All navigation links must work correctly.

The header, buttons, typography, product cards, colors, spacing, and footer must remain visually consistent throughout the entire website.

The final result should be visually impressive enough to present to a real jewelry business.